import React, { useState, useEffect, useRef, ReactNode } from 'react'
import { Steps, Button, Form, Input, Select } from 'antd'
import type { FormProps } from 'antd'
import style from './News.module.css'
import axios from 'axios'
import NewsEditor from '@/components/news-manage/NewsEditor'
export default function NewsAdd() {
  const [current, setCurrent] = useState(1)
  const [categoryList, setCategoryList] = useState([])
  const newsForm = useRef<any>(null)
  useEffect(() => {
    axios.get('/categories').then((res) => {
      console.log(res)
      setCategoryList(res.data)
    })
  }, [])
  const handleNext = () => {
    if (current === 0) {
      newsForm.current
        .validateFields()
        .then((res: any) => {
          console.log(res)
          setCurrent(current + 1)
        })
        .catch((err: any) => {
          console.log(err)
        })
    } else {
      setCurrent(current + 1)
    }
  }
  const handlePrevious = () => {
    setCurrent(current - 1)
  }
  return (
    <div>
      <header style={{ fontSize: 26, fontWeight: 'bold', marginBottom: '20px' }}>撰写新闻</header>
      <Steps
        current={current}
        items={[
          {
            title: '基本信息',
            description: '新闻标题，新闻分类'
          },
          {
            title: '新闻内容',
            description: '新闻主体内容'
          },
          {
            title: '新闻提交',
            description: '保存草稿或提交'
          }
        ]}
      />
      <div style={{ marginTop: '50px' }}>
        <div className={current == 0 ? '' : style.active}>
          <Form
            name="basic"
            ref={newsForm}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            autoComplete="off"
          >
            <Form.Item
              label="新闻标题"
              name="title"
              rules={[{ required: true, message: 'Please input your username!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="新闻分类"
              name="categoryId"
              rules={[{ required: true, message: 'Please input your password!' }]}
            >
              <Select options={categoryList} />
            </Form.Item>
          </Form>
        </div>
        <div className={current == 1 ? '' : style.active}> <NewsEditor></NewsEditor> </div>
        <div className={current == 2 ? '' : style.active}>33</div>
      </div>

      <div style={{ marginTop: '50px' }}>
        {current === 2 && (
          <span>
            <Button type="primary">提交到草稿箱</Button>
            <Button>提交审核</Button>
          </span>
        )}
        {current < 2 && (
          <Button type="primary" onClick={handleNext}>
            下一步
          </Button>
        )}
        {current > 0 && <Button onClick={handlePrevious}>上一步</Button>}
      </div>
    </div>
  )
}
